<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{$list[0]['novel_name']}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/toastr.js/2.1.3/toastr.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script src="//cdn.bootcss.com/toastr.js/2.1.3/toastr.min.js"></script>
    <script src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.min.js"></script>
    <script src="//cdn.bootcss.com/knockout/3.4.1/knockout-min.js"></script>
    <script src="//cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/clipboard.js/1.6.1/clipboard.min.js"></script>
    <script>
        toastr.options.positionClass = 'toast-bottom-right';
    </script>
    <script src="https://novel.818tu.com/static/js/admin.js?v=10"></script>

    <link rel="stylesheet" href="https://novel.818tu.com/static/css/page_mp_article.css"/>
    <link rel="stylesheet" href="https://novel.818tu.com/static/css/page_mp_article_improve_combo.css"/>
    <link rel="stylesheet" href="https://novel.818tu.com/static/css/admin.css?v=5"/>

    <!--[if lte IE 8]>
    <script src="https://novel.818tu.com/static/assets/js/html5shiv.min.js"></script>
    <script src="https://novel.818tu.com/static/assets/js/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        #editor-bar .dropdown-menu {
            height: auto;
            max-height: 400px;
            overflow-x: hidden;
        }

    </style>
</head>
<body>
<div class="rich_media">
    <div class="rich_media_inner" style="padding-top:0">
        <div class="rich_media_area_primary">
            <h1 id="wx-article-title_1" class="rich_media_title">{$title['content']}</h1>
            <div class="rich_media_content">
                <div id="wx-article-content">
                    <div id="wx-article-cover"><img src="{$domain}{$cover['url']}" style="width: 670px"/></div><br>
                    <input class="count" type="hidden" value="{$count}">
                    <volist name="list" id="val">
                        <div id="wx-article-body" data-title="{$val.chapter} {$val.title}" data-content="{$val.content}">
                            <!--正文模板开始-->

                            <section style="border:none;width:96%;margin:1em auto 2em;">
                                <section style="width:100%;height:auto;box-shadow:0em 0em 0.8em #A5A5A5;overflow:hidden;box-sizing:border-box;padding:1em;">
                                    <section style="display:inline-block;background:#EF303F;text-align:center;padding:0.1em 0.1em 0em;">
                                        <section style="width:90%;height:1px;border-top:0.3em solid #EF303F;-webkit-transform: rotate(-2deg) !important;transform: rotate(-2deg);margin:0 auto;margin-top:-0.2em;"></section>
                                        <section style="color:#fff;padding:0.5em 0.8em;">
                                            <p style="margin:0">
                                                <span class="title">{$val.chapter} {$val.title}</span>
                                            </p>
                                        </section>
                                    </section>
                                    <section style="width:auto;
height:auto;
margin:0 auto;
overflow:hidden;
border-top:0.1em dashed #EF303F;
padding:2em 0.5em 1em;
font-size:1em;
line-height:1.7em;
margin-top:-1em">
                                        <p class="content">{$val.content}</p>
                                    </section>
                                </section>
                            </section>


                            <!--正文模板结束-->
                        </div>
                    </volist>
                    <div id="wx-article-footer">
                        {$ywmb['ywnr']}
                    </div>
                </div>
            </div>
        </div>

        <!--start-->




        <!--end-->

    </div>
</div>

<nav id="editor-bar" class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#editor-menu"
                    aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="editor-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-header"></i> 文案标题 <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <!-- ko foreach: titles -->
                        <volist name="titles" id="tit">
                            <li><a class="wenantitle" href="#" data-bind="text: title, click: $root.changeTitle"
                                   onclick="changetitle('{$tit.content}')">{$tit.content}</a></li>
                        </volist>
                        <!-- /ko -->
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-image"></i> 文案封面 <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <!-- ko foreach: covers -->
                        <li>
                            <volist name="covers" id="cov">
                                <a href="#" data-bind="click: $root.changeCover">
                                    <img style="max-width:200px;max-height:40px;" onclick="changecover('{$domain}{$cov.url}')"
                                         src="{$domain}{$cov.url}"/>
                                </a>
                            </volist>
                        </li>
                        <!-- /ko -->
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">正文模板 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <!-- ko foreach: body_templates -->
                        <li style="border-bottom:#eee 1px solid;">
                            <volist name="img" id="val">
                                <a href="#" onclick="changemodel('{$val.id}')" >
                                    <img style="max-height: 40px;" src="{$domain}{$val.pic}"/>
                                </a>
                            </volist>
                        </li>
                        <!-- /ko -->
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">原文引导模板 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <!-- ko foreach: footer_templates -->
                        <li style="border-bottom:#eee 1px solid;">
                            <volist name="ywmb_all" id="val">
                            <a href="#" data-bind="click: $root.changeFooterTemplate">
                                <img style="max-height: 40px;" src="{$domain}{$val.pic}" onclick="changeywmodel('{$val.id}')"/>
                            </a>
                            </volist>
                        </li>
                        <!-- /ko -->
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-copy"></i> 复制 <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0);" id="btn-copy-title" data-clipboard-target="#wx-article-title_1" data-clipboard-action="copy">复制标题</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" id="btn-copy-content"
                               data-clipboard-target="#wx-article-content">复制正文</a>
                        </li>
                    </ul>
                </li>
            </ul>

            <div class="navbar-form navbar-right">
                    <span >
                                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                                        <i class="fa fa-link"></i>生成原文链接
</button>
                                            </span>
            </div>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>



<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="myModalLabel">生成推广链接</h5>
            </div>
            <div class="modal-body">
                <div><span style="margin-top: 8px; margin-left: 40px;"><strong>入口页面</strong></span><span style="margin-top: 8px; margin-left: 40px;">小说阅读页</span></div>
                <div style="margin-top: 30px; margin-left:20px;"><span style="color:red">*</span>派单链接地址
                    <span style="margin-top: 30px; margin-left:20px;" class="url">http://qikaism.cn/Home/Novel/show/id/{$next.id}/novel_id/{$next.novel_id}/uid/{$uid}</span>
                </div>
                <div><img style="width: 80px; margin-left: 150px; margin-top: 40px;" src="{$list[0]['novel_mini_img']}"/></div>
                <div style="margin-top: 30px; margin-left: 30px "><span>阅读原文文章</span><span style="margin-left: 50px; font-weight: 700" id="zhangjiename">{$next['chapter']} {$next['title']}</span></div>
            </div>
        </div>
    </div>
</div>


</body>
<script src="./Public/qwadmin/js/clipboard.js/dist/clipboard.min.js"></script>
<script>  
    //切换文案封面
    function changecover(v) {
        $("#wx-article-cover").find('img').attr('src', v);
    }
    //切换文案标题
    function changetitle(v) {
        $("#wx-article-title_1").text(v)
    }
    //切换正文模板
    function changemodel(v) {
        $.ajax({
            type:'GET',
            url:'{:U("chapter")}',
            data:{"show_id":v},
            success:function(data){
                var count = $(".count").val();
                for (var i=1;i<=count;i++){
                    var title=$("#wx-article-content").find('div:eq('+i+')').attr('data-title');
                    var content=$("#wx-article-content").find('div:eq('+i+')').attr('data-content');
                    $("#wx-article-content").find('div:eq('+i+')').html(data.content);
                    $("#wx-article-content").find('div:eq('+i+') span.title').html(title);
                    $("#wx-article-content").find('div:eq('+i+') p.content').html(content);
                    $("#wx-article-content").find('div:eq('+i+') section.num').html(i);
                }

            },
            dateType:'json'
        });
    }
    //切换原文模板
    function changeywmodel(v) {
        $.ajax({
            type:'GET',
            url:'{:U("chapter")}',
            data:{"ywmb":v},
            success:function(data){
                $('#wx-article-footer').html(data.ywnr);
            },
            dateType:'json'
        });
    }
    //复制文本
    $(function() {
        new Clipboard('#btn-copy-title').on('success', function (e) {
            e.clearSelection();
            toastr.success('标题复制成功');
        });
        new Clipboard('#btn-copy-content').on('success', function (e) {
            e.clearSelection();
            toastr.success('正文复制成功');
        });
    });
</script>

</body>
</html>
